<template>
	<div class="web" ref="home">
		<!-- logo -->
		<logo></logo>
		<!-- 左云 -->
		<cupidr></cupidr>
		<!-- cloud -->
		<cloud></cloud>
		<!-- 你的桃花指数 -->
		<title2></title2>
		<!-- 窗口 -->
		<div class="wind">
			<div class="picfrm">
				<img class="p_body" :src="this.$store.state.avator" alt="">
				<i class="i1"></i>
				<i class="i2">{{pictitle}}</i>
			</div>
			<div class="w-type">
				<span>{{pictype}}</span>
			</div>
		</div>
		<!-- 按钮 -->
		<div class="pho-btn" v-if="!qrnum">
			<button class="p-btn" @click="poster">保存图片发朋友圈</button>
			<button class="p-btn" @click="toLoad">看看谁和我匹配</button>
		</div>
		<!-- 二维码 -->
		<div class="qrcode" v-show="qrnum">
			<div class="qrcode_img">
				<canvas ref="canvas"></canvas>
			</div>
			<div class="qr_type" v-show="!postimg">
				<p>长按识别二维码</p>
				<p>扫码测我的择偶倾向</p>
			</div>
		</div>
		<!-- 截图 -->
		<div class="poster" v-if="postimg" @click="offImg($event)">
			<img  :src="postimg">
			<p>长按图片保存分享</p>
		</div>
		
	</div>
</template>

<script>
	import html2canvas from 'html2canvas';
	import QRCode from 'qrcode';
	
	import cloud from "@/components/base/cloud.vue";
	import logo from "@/components/base/logo.vue";
	import cupidr from "@/components/base/cupid_r.vue";
	import title2 from "@/components/base/title-2.vue";
	import window2 from "@/components/base/window-2.vue";
	
	import api from "@/config/api.js";
	import resdata from "@/data/resultData.json";
	
	export default {
		data() {
			return {
				imgfile:"",
				postimg:"",
				qrnum:"",
				pictitle:"",
				pictype:"",
				gender:""
			}
		},
		mounted() {
			const that = this;
			let typenum = this.$store.state.type;
			
			var formdata = new FormData();
			formdata.append("avator",this.$store.state.avator);
			this.$axios({
				method:"post",
				url:api.newface,
				data:formdata,
				dataType:'json'
			})
			.then((res)=>{
				that.$store.commit("set_gender",res.data.gender);
				
				if(res.data.gender==1){
					// 为男生
					let boys = resdata['type' + this.$store.state.type].boy;
					// 创建一个随机数
					let resultnum = boys[Math.floor(Math.random()*boys.length)]
					that.pictitle = resultnum.grade;
					that.pictype = resultnum.res_des;
					that.gender = 1;
					return
				}
				if(res.data.gender==2){
					// 为女生
					let girls = resdata['type' + this.$store.state.type].girl;
					let resultnum = girls[Math.floor(Math.random()*girls.length)]
					that.pictitle = resultnum.grade;
					that.pictype = resultnum.res_des;
					that.gender = 2;
					return
				}
				else{
					let others = resdata['type' + this.$store.state.type].other;
					let resultnum = others[others.length]
					that.pictitle = resultnum.grade;
					that.pictype = resultnum.res_des;
					return
				}
			})
		},
		methods:{
			poster(){
				const that = this;
				
				// 生成二维码
				// QRCode第三个参数可以设置二维码尺寸
				QRCode.toCanvas(this.$refs.canvas,'http://huanyu.bluej.cn/dist/#/home',{
					width:75,
					height:75,
				},function(err){
					if(err){
						console.log(err);
						return;
					}
					console.log('success');
					that.qrnum = "1";
				})
				
				
				// 生成海报的div要单独布局
				setTimeout(()=>{
					html2canvas(this.$refs.home).then(function(canvas){
						// canvas.toDataURL将canvas转成64位
						// console.log(canvas.toDataURL("image/jpg",1))
						that.postimg = canvas.toDataURL("image/jpg",1);
					});
				})
				
				
				
			},
			offImg(e){
				this.postimg = "";
				this.qrnum = "";
			},
			toLoad(){
				this.$router.push({path:'/download',query:{gender:this.gender}});
			}
		},
		components:{
			cloud,
			logo,
			cupidr,
			title2,
			window2
		}
	}
</script>

<style lang="scss" scoped>
	@function px2vw($px){
		@return $px/7.5*1vw
	}
	.web{
		position: relative;
		width: 100vw;
		height: 100vh;
		background-image: url(../images/backgroundimg.jpg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding-top: px2vw(141);
	}
	.pho-btn{
		width: px2vw(458);
		position: absolute;
		left: 50%;
		// top: 73%;
		margin-left: px2vw(-229);
		text-align: center;
		// margin-top: px2vw(25);
		padding-top: px2vw(25);
		bottom: auto;
	}
	.p-btn{
		width: px2vw(458);
		height: px2vw(83);
		
		background-image: url(../images/images/button_03.png);
		background-repeat: no-repeat;
		background-size: px2vw(458) px2vw(83);
		
		border-radius: px2vw(40);
		display: block;
		font-size: px2vw(35);
		font-weight: bold;
		color: #ae037c;
		letter-spacing:3px;
		outline:none;
		margin-top: px2vw(41);
	}
	
	.wind{
		position: absolute;
		top: px2vw(353);
		left: px2vw(118);
		right: px2vw(118);
		
		width: px2vw(508);
		height: px2vw(660);
		background-image: url(../images/images/wind-2_03.png);
		background-repeat: no-repeat;
		background-size: px2vw(508) px2vw(660);
		padding-top: px2vw(47);
	}
	.picfrm{
		position: relative;
		width: px2vw(204);
		height: px2vw(257);
		margin: 0 auto;
		margin-bottom: px2vw(41);
		
		background-image: url(../images/images/touxiang-2_03.png);
		background-repeat: no-repeat;
		background-size: px2vw(204) px2vw(257);
	}
	.p_body{
		position: absolute;
		width: px2vw(152);
		height: px2vw(152);
		border-radius: 50%;
		
		top: px2vw(16);
		left: px2vw(28);
	}
	.i1{
		position: absolute;
		bottom: px2vw(10);
		left: px2vw(37);
		
		font-size: px2vw(50);
		color: #ffffff;
		font-weight: bold;
	}
	.i2{
		position: absolute;
		bottom: px2vw(18);
		right: px2vw(40);
		
		font-size: px2vw(30);
		color: #ffffff;
		font-weight: bold;
	}
	.w-type{
		width: px2vw(190);
		margin: 0 auto;
		text-align: center;
		line-height: 30px;
		>span{
			font-size: px2vw(30);
			font-weight: 500;
			color: #ffffff;
		}
	}
	
	.poster{
		position: absolute;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: column;
		background-color: rgba(0,0,0,.6);
		>img{
			width: 85%;
			z-index: 9;
		}
	}
	.poster>p{
		color: #fff;
	}
	.qrcode{
		position: relative;
		// top: px2vw(840);
		
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: column;
		z-index: 999;
		text-align: center;
		padding-top: px2vw(40);
	}
	.qr_type{
		>p{
			font-size: px2vw(30);
			width: px2vw(300);
			color: #fff;
		}
	}
	.qrcode_img{
		width: px2vw(150);
		height: px2vw(150);
		background-color: #fff;
	}
</style>
